<template>
  <div class="detail">
    <van-tabs @click="onClick">
      <van-tab v-for="(item, index) in list" :title="item" :key="index">
        <van-list>
          <div class="product" v-for="item in alllproduct" :key="item._id">
            <img :src="item.coverImg" alt="" />
            <div class="product-r">
              <div>{{ item.name }}</div>
              <div></div>
              <div>{{ item.price }}</div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  // reqGetProductList,
  reqProductsAPI,
} from "../api/product";
import { Toast } from "vant";
export default {
  components: {},
  data() {
    return {
      list: ["口红", "灯具", "电视", "耳机", "智能手表", "手机"],
      alllproduct: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    onClick(name, title) {
      this.getlist(title);
      Toast(title);
    },
    // 获取列表
    async getlist(msg) {
      let per = 200; //获取数据库里面的全部数据 默认为一次获取十条
      let result = await reqProductsAPI({ per });
      //筛选商品的分类
      let demolist = result.products.filter(
        (v) => v.productCategory.name == msg
      );
      this.alllproduct = demolist;
    },
  },
  created() {
    this.getlist("口红"); //获取口红分类的商品
  },
  mounted() {},
};
</script>
<style scoped>
.van-tabs__wrap {
  position: fixed;
}
.van-swipe-item img {
  width: 100%;
  height: 200px;
  display: block;
}
.product {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}
.product img {
  width: 80px;
}
.product-r {
  margin-left: 10px;
  flex: 1;
  font-size: 13px;
}
.van-list {
  padding-bottom: 50px;
}
</style>
